// 导入模块

const gulp = require('gulp')
const uglify = require('gulp-uglify');  // 压缩JS并去掉注释
const babel = require('gulp-babel');    // 解决ES6转es5兼容问题
const rev = require('gulp-rev');        // 打包文件加随机名 hash名
const revCollector = require('gulp-rev-collector'); //根据temp目录记录的规则替换 html 路径
const clean = require('gulp-clean')     // gulp 清除文件
const minifyCss = require('gulp-minify-css'); // 压缩CSS并去掉注释
const htmlmin = require('gulp-htmlmin')
const fs = require('fs');
// const proxy = require('http-proxy-middleware')
const picture= require('gulp-tinypng-nokey')
const { createProxyMiddleware } = require('http-proxy-middleware');

// const imagemin = require('gulp-imagemin');    // 压缩图片

// 打包HTML任务
// gulp.task('html',()=>{

// })
// gulp.task('imgs',()=>{
    //     //1. 获取到文件数据
    //     gulp
    //         .src('./src/imgs/*.*')
    //         // 2.过滤数据（pipe可以称之为管道，数据在里面流动 过滤数据）
    //         .pipe(imagemin())
    //         // 3.写到dist目录下
    //         .pipe(gulp.dest('./dist/imgs/'))
    
    // })
// 打html任务
gulp.task('html',over=>{
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    }
    gulp
        .src(['temp/**/*.json','./src/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/'))
        over()
})
// 打包img图片
gulp.task('imgs',over=>{
    gulp
        .src('./src/imgs/*.*')
        // .pipe(imagemin())
        .pipe(picture())
        .pipe(gulp.dest('./dist/imgs/'))
        setTimeout(()=>{
            over()

        },30000)
})
// 清除目录
gulp.task('clean',over=>{
    if(fs.existsSync('dist/')){

        gulp.src('dist/',{read: false})
            .pipe(clean());
    }
    setTimeout(()=>{
        over()

    },2000)
})
// 打包css任务
gulp.task('css',over=>{
    gulp
        .src('./src/css/*.css')
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(clean())
        .pipe(gulp.dest('./dist/css/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./temp/css'))
        over()
})
// 打包js任务
gulp.task('js',over=>{
    gulp
        // .src(['./src/js/a.js','./src/js/b.js'])
        .src('./src/js/*.js')
        // 过滤数据
        // 先转
        .pipe(babel({"presets": ["env"]}))
        // 后压缩
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/js/'))

        // -------------------------
        .pipe(rev.manifest())
        .pipe(gulp.dest('./temp/js'))
        over()
})
// 调用方法创建任务；学习打印666 后面打包js、css等

// 语法：gulp.task('任务名',callback)
// 触发：gulp 任务名
// 留心：不写默认名则默认触发default 默认任务
// gulp.task('default', () => {
//     console.log('吕永仓');
// })
// gulp.task('js', () => {
//     console.log('后期这里面去打包压缩项目的js代码');
// })
// gulp.task('serve',()=>{
//     console.log('提供web服务器访问src下面的代码去开发 而不是用live server');
// })
// gulp.task('bulid',()=>{
//     console.log('将src里面的代码压缩放到dist目录下');
// })
// 批量打包
// gulp.test('test1',gulp.series/parallel(任务1，任务2，任务n，callback))
gulp.task('bulid',gulp.series('clean','js','imgs','css','html',()=>{
    // gulp clean
    // gulp js
    // gulp CSS
    // gulp imgs
    // gulp html
    console.log('打包完成');
}))

// 通过node搞web服务器开发的时候使用
const server =require('browser-sync').create();
const watch = require('gulp-watch')
gulp.task('serve',()=>{
    server.init({
        // server:'./src',
        server:{
            baseDir:'./src',
            middleware:[
                //后期这个网站只要请求地址是/api开头的都会被拦截
                // 前端模块代理请求
                // 然后返回数据
                // http://localhost/api/v1/goods/like.jsp
                // 由node模块代理请求地址是target + $.get()的url
                // 最终的地址：target地址 + $.get()的url
                createProxyMiddleware('/api',{
                    // 目标服务网址
                    target:'http://kg.zhaodashen.cn/v1/', //这里面写后端接口地址
                    changeOrigin:true, // 是否跨域
                    secure:false,  //关闭ssl证书验证https协议接口需要改成true
                    pathRewrite:{
                        //移除
                        // '^/remove/api':''
                        '^/api':''
                    },
                })
            ]
        },
        port:80
    })
})
// 监控文件修改
watch('./src/*.html',function(){
    console.log('你修改了html文件');
    server.reload()
})
watch('./src/css/*.css',function(){
    console.log('你修改了css文件');
    server.reload()
})
watch('./src/js/*.js',function(){
    console.log('你修改了js文件');
    server.reload()
})